<template>
	<div class="time">
		<div>{{ format(hour) }}</div>
		<div>:</div>
		<div>{{ format(min) }}</div>
		<div>:</div>
		<div>{{ format(seconds) }}</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		nextTick,
		computed,
		onUnmounted,
		defineEmits
	} from "vue";
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app";
	const {
		proxy
	} = getCurrentInstance();
	const emit = defineEmits("submit")
	const props = defineProps({
		totalSeconds: {
			type: Number,
		}
	})
	onLoad(() => {
		nextTick(() => {
			totalSeconds.value = props.totalSeconds
		})
	})
	const totalSeconds = ref(0);
	const seconds = computed(() => {
		return totalSeconds.value % 60;
	});
	const min = computed(() => {
		return Math.floor((totalSeconds.value % 3600) / 60);
	});
	const hour = computed(() => {
		return Math.floor(totalSeconds.value / 3600);
	});
	const format = (num) => {
		return num < 10 ? "0" + num : num;
	};
	const timer = ref();
	const start = () => {
		timer.value = setInterval(() => {
			totalSeconds.value--;
			if (totalSeconds.value == 0) {
				emit("submit")
			}
		}, 1000);
	};

	const stop = () => {
		console.log("我停止了！")
		clearInterval(timer.value)
	};

	defineExpose({
		start,
		stop,
	});

	onUnmounted(() => {
		stop();
	});
</script>

<style lang="scss" scoped>
	.time {
		display: flex;
		padding: 0px 5px;
	}
</style>